<template>
    <div id="wfcalendar">
        <div class="calendar_header">
            <p style="width:33%"><img src="@/assets/image/左箭头.png" alt="" @click="monthtoleft"></p>
            <p style="width:34%;text-align:center" v-if="checkyeardisplay=='0'">
                <span @click="checkyeardisplay='1'">{{thisyear}}</span>-
                <span @click="checkyeardisplay='2'">{{thismonth<=9?'0'+thismonth:thismonth}}</span>-
                <span>{{today<=9?'0'+today:today}}</span> <br>
                <span>星期{{week[weekday]}}</span> 
            </p>
            <p style="width:34%;text-align:center" v-if="checkyeardisplay=='1'"><span>{{startyear}}年</span>-<span>{{endyeaar}}年</span></p>
            <p style="width:34%;text-align:center" v-if="checkyeardisplay=='2'"><span>{{thisyear}}年</span></p>
            <p style="width:33%;text-align:right"><img src="@/assets/image/箭头.png" alt="" @click="monthtoright"></p>
            
        </div>
        <hr>
        <ul class="wf-week" v-if="checkyeardisplay=='0'">
            <li v-for="(item,index) in week" :key="index"><span :class="{weektoday:index==weekday}">{{item}}</span></li>
        </ul>
        <ul class="wf-days" v-if="checkyeardisplay=='0'">
            <li v-for="(item,index) in daylist" :key="index" @click="checkday(item.day,item.ismonth)" :class='{check:thisyear==year&&thismonth==month&&item.day==today&&item.ismonth==1}'><span :class="{fontcolor:item.ismonth==0}">{{item.day}}</span></li>
        </ul>
        <ul class="checkyears" v-if="checkyeardisplay=='1'">
            <li v-for="(item,index) in checkyear" :key="index" :class="{check:item==thisyear}" @click="checkmonth(item)">{{item}}</li>
        </ul>
        <ul class="checkyears" v-if="checkyeardisplay=='2'">
            <li v-for="(item,index) in checkmonths" :key="index" :class="{check:item==thisyear}" @click="checkdays(index)">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    const myDate = new Date();
    export default {
        name:"Mycalender",
        data() {
            return {
                week:  ['日', '一', '二', '三', '四', '五', '六'],
                daylist:[],
                thisyear:'',
                thismonth:'',
                today:'',
                weekday:'',
                year:'',
                month:'',
                day:'',
                weeks:'',
                checkyear:[],
                checkmonths:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                checkyeardisplay:'0',
                startyear:'',
                endyeaar:''
            };
            
        },
        created(){
            //初始化年月日星期
            this.year=this.thisyear=myDate.getFullYear()
            this.month=this.thismonth=myDate.getMonth()+1
            this.day=this.today=myDate.getDate()
            this.weeks=this.weekday=myDate.getDay()
            this.getcalendar()
            this.startyear=Math.floor(this.thisyear/10)*10
            this.endyeaar=this.startyear+9
            for(var i=this.startyear;i<=this.endyeaar;i++){
                this.checkyear.push(i)
            }
        },
        mounted(){
            
        },
        methods:{
            getcalendar(){
                let daysnumber= new Date(this.thisyear,this.thismonth,0).getDate();//获取当月天数
                let beginweeks=new Date(this.thisyear,this.thismonth-1,1).getDay();//获取当月1日是星期几，确定1日开始位置
                let list=[]
                let mos=''
                if(this.thismonth==1){
                    mos=new Date(this.thisyear,11,0).getDate()
                }else{
                    mos=new Date(this.thisyear,this.thismonth-1,0).getDate()
                }
                //补全一日之前空缺位置
                console.log(mos)
                for(var i=beginweeks;i>0;i--){
                    let arr={
                        day:mos--,
                        ismonth:'0'
                    }
                    list.push(arr)
                }
                this.daylist=list.reverse()
                
                
                for(var j=1;j<=daysnumber;j++){
                    let arr={
                        day:j,
                        ismonth:'1'
                    }
                    this.daylist.push(arr)
                }
                let endweeks=new Date(this.thisyear,this.thismonth-1,daysnumber).getDay();//获取当月最后一天是星期几
                 //补全每月结束之后空缺位置
                for(var m=1;m<7-endweeks;m++){
                    let arr={
                        day:m,
                        ismonth:'0'
                    }
                    this.daylist.push(arr)
                }
            },
            //上一月
            monthtoleft(){
                
                if(this.checkyeardisplay=='0'){
                    if(this.thismonth>1){
                        this.thismonth=this.thismonth-1
                    }else{
                        this.thismonth=12
                        this.thisyear=this.thisyear-1
                    }
                    this.getcalendar()
                }else if(this.checkyeardisplay=='1'){
                    this.startyear=this.startyear-10
                    this.endyeaar=this.startyear+9
                    this.checkyear=[]
                    for(var i=this.startyear;i<=this.endyeaar;i++){
                        this.checkyear.push(i)
                    }
                }else if(this.checkyeardisplay=='2'){
                     this.thisyear=this.thisyear-1
                }
            },
            //下一月
            monthtoright(){
                if(this.checkyeardisplay=='0'){
                    if(this.thismonth<12){
                        this.thismonth=this.thismonth+1
                    }else{
                        this.thismonth=1
                        this.thisyear=this.thisyear+1
                    }
                    this.getcalendar()
                }else if(this.checkyeardisplay=='1'){
                    this.startyear=this.startyear+10
                    this.endyeaar=this.startyear+9
                    this.checkyear=[]
                    for(var i=this.startyear;i<=this.endyeaar;i++){
                        this.checkyear.push(i)
                    }
                }else if(this.checkyeardisplay=='2'){
                    this.thisyear=this.thisyear+1
                }
                
            },
            //获取点击日期
            checkday(days,ismonth){
                if(ismonth==1){
                    this.year=this.thisyear
                    this.month=this.thismonth
                    this.day=this.today=days
                    this.weeks=this.weekday=new Date(this.thisyear,this.thismonth-1,days).getDay()
                }
                this.$emit('date',this.thisyear+'/'+this.thismonth+'/'+this.today+'/'+this.weekday)
            },
            checkyeardisplays(){
                this.checkyeardisplay='1'
            },
            checkmonth(year){
                this.thisyear=year
                this.checkyeardisplay='2'
            },
            checkdays(month){
                this.thismonth=month+1
                this.getcalendar()
                this.checkyeardisplay='0'
            }
        }
        
    };
</script>
<style scoped>
#wfcalendar{
    background: white;
    padding: 10px;
    width: 624px;
    border: 1px solid #EAEBED;
    max-height: 503px;

}
#wfcalendar .wf-week{
    
}
#wfcalendar hr{
    background: #EAEBED;
    height: 1px;
    border: none ;
    margin: 0;
    width: 644px;
    margin-left: -10px;
}
#wfcalendar .wf-week li{
    width: 78px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 1px;
}
#wfcalendar .wf-week li .weektoday{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #FFB400;
    line-height: 30px;
    border-radius: 15px;
    color: white;
}
#wfcalendar .wf-days li{
    display: inline-block;
    height: 58px;
    width: 78px;
    line-height: 58px;
    margin: 0px auto;
    border-radius: 4px;
    background: #eef7fe;
    text-align: center;
    margin-right: 1px;
    cursor: pointer;
    margin-bottom: 1px;
}
#wfcalendar .wf-days li .fontcolor{
    color: #ccc;
    cursor:not-allowed;
    display: inline-block;
    width: 100%;
    height: 100%;
    /* pointer-events:none; */
}
#wfcalendar .wf-days .check{
    background: #95CFFD;
}
#wfcalendar .calendar_header{
    height: 67px;
    width: 100%;
    color: #5e7a88;
}
#wfcalendar .calendar_header p {
    display: inline-block;
}
#wfcalendar .calendar_header p img{
    width: 26px;
    height: 26px;
    cursor: pointer;
}
#wfcalendar .calendar_header p span{
    display: inline-block;
    cursor: pointer;
    /* width: 100%; */
}
#wfcalendar .calendar_header p span:hover{
    color: #5CB3FF;
}
#wfcalendar .checkyears li{
    display: inline-block;
    width: 25%;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}
#wfcalendar .checkyears .check{
    color: #2176D9;
}
</style>

